import React from "react";
import "./index.less";

export default function ShowCardContent({
  type = "success",
  title = "支付成功",
  amount = 0,
  currency = "元",
  discount = 0,
  showDiscount = true,
  statusColor = "#333",
  amountColor = "#ff4d4f",
  iconColor = "#52c41a",
  className = "",
  style = {},
}) {

  console.log(amount,"---amount", discount);
  
  return (
    <div className={`payment-status ${className}`} style={style}>
      <div className="status-row">
        <>
          {type === "success" ? (
            <div className="status-icon" style={{ backgroundColor: iconColor }}>
              {"✓"}
            </div>
          ) : (
            <div className="status-icon"></div>
          )}
          <span className="status-text" style={{ color: statusColor }}>
            {title}
          </span>
        </>
      </div>

      {/* 支付金额和优惠标签 - 居中布局 */}
      <div className="amount-row">
        <div className="amount-container">
          <div className="amount-number" style={{ color: amountColor }}>
            {amount}
            <span className="currency-unit" style={{ color: amountColor }}>
              {currency}
            </span>
          </div>
          {showDiscount ? (
            <div className="discount-tag">
              优惠{discount}
              {currency}
            </div>
          ) : (
            <div className="discount-tag"></div>
          )}
        </div>
      </div>
    </div>
  );
}
